import {
  Component,
  ElementRef,
  Input,
  OnInit,
  Renderer2,
  TemplateRef,
  ViewChild,
} from '@angular/core';

@Component({
  selector: 'apes-timeline-item',
  preserveWhitespaces: false,
  templateUrl: './apes-timeline-item.component.html',
})
export class ApesTimelineItemComponent implements OnInit {
  private _dot: string | TemplateRef<void>;
  private _color: string = 'blue';
  private _isLast = false;
  prefixCls = 'apes-timeline';
  @ViewChild('liTemplate',{static:false}) liTemplate: ElementRef;
  isDotString: boolean;
  isType = false;
  isOA = false;
  isTodo = false;
  classMap;

  set isLast(value: boolean) {
    this._isLast = value;
    if(!this.liTemplate) return;
    if (this.isLast) {
      this.renderer.addClass(this.liTemplate.nativeElement, 'apes-timeline-item-last');
    } else {
      this.renderer.removeClass(this.liTemplate.nativeElement, 'apes-timeline-item-last');
    }
  }

  get isLast(): boolean {
    return this._isLast;
  }

  @Input()
  set apesDot(value: string | TemplateRef<void>) {
    this.isDotString = !(value instanceof TemplateRef);
    this._dot = value;
  }

  get apesDot(): string | TemplateRef<void> {
    return this._dot;
  }

  @Input()
  set apesType(value: boolean) {
    this.isType = value;
  }

  get apesType() {
    return this.isType;
  }

  @Input()
  set apesOA(value: boolean) {
    this.isOA = value;
  }

  get apesOA() {
    return this.isOA;
  }

  @Input()
  set apesTodo(value: boolean) {
    this.isTodo = value;
  }

  get apesTodo() {
    return this.isTodo;
  }

  @Input()
  set apesColor(color: string) {
    this._color = color;
    this.updateClassMap();
  }

  get apesColor(): string {
    return this._color;
  }

  updateClassMap(): void {
    // const defaultColors = [ 'blue', 'red', 'green' ];
    // const circle = this.liTemplate.nativeElement.querySelector('.apes-timeline-item-head');
    // if (defaultColors.indexOf(this._color) === -1) {
    //    this.renderer.setStyle(circle, 'border-color', this._color);
    //  } else {
    //    this.renderer.removeStyle(circle, 'border-color');
    //  }
    this.classMap = {
      [`${this.prefixCls}-item-head-green`]: this.apesColor === 'green',
      [`${this.prefixCls}-item-head-red`]: this.apesColor === 'red',
      [`${this.prefixCls}-item-head-blue`]: this.apesColor === 'blue',
      [`${this.prefixCls}-item-OA`]: this.apesOA,
    };
  }

  constructor(private renderer: Renderer2) {
  }

  ngOnInit(): void {
    this.updateClassMap();
  }

}
